<template>
	<ls-page title='已点订单'>
		<view>
			<view class="orderHistory-container">
				<view class="orderHistory-main">
					<view class="orderHistory-table">
						<view class="orderHistory-table-text">桌号：{{ tableInfo.name }}</view>
						<view class="orderHistory-table-text">台单号：{{ tableInfo.consumeCode }}</view>
					</view>
					<!-- 应该是根据订单号分组 -->
					<package-goods-more v-if="recordInfo" :recordInfo="recordInfo"></package-goods-more>
				</view>
				<view class="orderHistory-footer">
					<view class="cm-order-info__sum">
						合计{{ recordInfo.mainGoodsCount ? recordInfo.mainGoodsCount : 0 }}件，支付金额：
						<text class="cm-order-info__rmb">￥</text>
						<text class="cm-order-info__num">{{recordInfo.payAmt ?_FormatNumber(recordInfo.payAmt) :0 }}</text>
					</view>
				</view>
			</view>

		</view>

	</ls-page>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh,
		onShow,
		onHide,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		nextTick
	} from 'vue';
	import {
		HFiveMemberAppObjProcess
	} from '@/api/public.js'
	import {
		_FormatNumber
	} from '@/until/tools';

	const tableInfo = ref({})
	const recordInfo = ref('')
	const getOrderInfo = async () => {
		const res = await HFiveMemberAppObjProcess({
			"functionName": "GetMemberOrderInfo_H5",
			"contentData": {
				consumeCode: tableInfo.value.consumeCode,
				roomCode: tableInfo.value.code,
				pageSize: '999',
				pageindex: '1'
			}
		})
		recordInfo.value = res[0]
		console.log(recordInfo.value);
		// cardList.value = res
	}

	onShow(() => {
		tableInfo.value = uni.getStorageSync('tableInfo')
		getOrderInfo()
	});
</script>

<style lang="scss" scoped>
	.orderHistory-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		// overflow: hidden;

		.orderHistory-main {
			padding: 0 24rpx 134rpx;
			flex: 1;
			overflow: auto;
		}

		.orderHistory-table {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-text {
				padding: 23rpx 0rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: var(--maincolorf1);
				line-height: 36rpx;
				// background: #260000;
				border-radius: 8rpx;
			}

		}

		.orderHistory-footer {
			// padding: 24rpx;
			text-align: right;
			background: var(--mainbaccolor10);
			position: fixed;
			width: 100%;
			// height: 60rpx;
			bottom: 0;
			padding: 24rpx;
			box-sizing: border-box;

			.cm-order-info__rmb {
				color: var(--maincolorf1);
			}

			.cm-order-info__num {
				color: var(--maincolorf1);
			}
		}
	}
</style>